<template>
  <div class="share-list">
    <JLForm
      ref="formRef"
      class="search-from"
      :form-config="formConfig"
      :form-data="formData"
      :form-item-config="formItemConfig"
    >
      <template #projectNameSlot>
        <el-select
          v-model="formData.projectName"
          placeholder="请选择"
          clearable
          filterable
          class="jl-form-control"
        >
          <el-option
            v-for="option in proListData"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
      </template>
      <template #searchSlot>
        <el-button color="#0560FD" @click="search">查询</el-button>
      </template>
    </JLForm>

    <JLDatagrid
      :data="tableData"
      :table-config="tableConfig"
      :column-config="tableColumn"
      :page-config="pageConfig"
      @pageCurrentChange="pageCurrentChange"
      @pageSizeChange="pageSizeChange"
    >
      <template #expirationTimeSlot="{ row }">
        <div
          class="expiration"
          :class="{
            expiration_1: row.expirationTimeName === '永久有效',
            expiration_2: row.expirationTimeName === '已过期',
          }"
        >
          {{ row.expirationTimeName }}
        </div>
      </template>
      <template #createTimeSlot="{ row }">
        <div>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
      </template>
      <template #shareTypeSlot="{ row }">
        <div>{{ ShareType[row.shareType] && ShareType[row.shareType].value }}</div>
      </template>

      <template #slotOperation="{ row }">
        <div class="table-btn-wrap">
          <el-button
            v-if="row.shareStatus === 0 && row.expirationTimeState !== 3"
            type="text"
            class="btn"
            @click="onCopy(row)"
            >复制链接</el-button
          >
          <el-button
            v-if="row.shareStatus === 0 && row.expirationTimeState !== 3"
            type="text"
            class="btn"
            @click="onCancel(row)"
            >取消分享</el-button
          >
        </div>
      </template>
    </JLDatagrid>
    <Total :num="pageConfig.total" />
  </div>
</template>

<script setup lang="ts">
import { cancelSceneShare } from '@/api/scene';
import Total from '@/components/pagination/total.vue';
import { confirmAgain, copyText } from '@/utils';
import { ShareType } from '@/views/enum/scene';
import withBase from '@jl/common/src/utils/path';
import { JLDatagrid, JLForm } from '@jl/element-plus';
import { dayjs } from 'element-plus';
import { list } from './composables/list';

defineOptions({
  name: 'SceneShare',
});

const {
  formRef,
  formConfig,
  formData,
  formItemConfig,
  tableRef,
  pageConfig,
  tableConfig,
  tableColumn,
  tableData,
  proListData,
  search,
  pageCurrentChange,
  pageSizeChange,
} = list();

onMounted(() => {
  search();
});

async function onCancel(item: API.Scene.IShareListItem) {
  const flag = await confirmAgain(
    '确认取消该场景分享？',
    '该操作不可逆，取消后分享链接将失效。',
    '',
    '',
    'custom-message-box'
  );
  if (!flag) return;
  cancelSceneShare({ data: { ids: [item.id] } }).then(() => {
    search();
  });
}

function onCopy(row: API.Scene.IShareListItem) {
  let str = `${location.origin}${withBase()}share/scene/${row.shareCode}`;
  if (row.shareType === 'encrypt') {
    str = '链接：' + str + ` 密码：${row.accessPassword}`;
  }
  copyText(str);
}
</script>

<style lang="less" scoped>
.share-list {
  position: relative;

  :deep(.total) {
    position: absolute;
    left: 0;
    bottom: 0;
  }
}

.expiration {
  display: flex;
  align-items: center;
  &::before {
    content: '';
    display: block;
    width: 7px;
    height: 7px;
    background: #0560fd;
    border-radius: 50%;
    margin-right: 10px;
  }
  &_1 {
    &::before {
      background: #00f763;
    }
  }
  &_2 {
    &::before {
      background: #ff5454;
    }
  }
}
</style>
